<template>

    <div >
        <el-dialog
                top="25vh"
                title="上传新闻图片"
                v-model="dialogVisible"
                width="50%"
        >
            <div style="text-align: center">
                <el-upload
                        ref="upload"
                        class="upload-demo"
                        drag="true"
                        :on-success="clearFiles"
                        :file-list="fileList"
                        :headers="headers"
                        :action="action"
                        >
                    <i class="el-icon-upload"></i>
                    <template #tip>
                        <div class="el-upload__tip">
                            图片宽度*高度至少为150*150像素，大小不超过2MB
                        </div>
                    </template>
                </el-upload>

            </div>



            <template #footer>


                <span class="dialog-footer">
                     <el-button @click="dialogVisible = false">取 消</el-button>
                 </span>
            </template>
        </el-dialog>
    </div>

</template>

<script>

    import {getCookie} from "../../../utils/api";

    export default {
        name: "ImgHeadUpload",
        data(){
            return{
                fileList:[],
                id:undefined,
                action:undefined,
                dialogVisible:false,
                headers: {authorization: undefined}
            }
        },
        methods:{
         _open(id){
             this.id=id
             this.action='/api/cms_recommend/recommend_img_upload?id='+id
             this.headers.authorization=getCookie('Authorization')
             this.dialogVisible=true
         },
            clearFiles(){
                this.$refs.upload.clearFiles();
            }
        }
    }
</script>

<style scoped>


    .el-dialog{
        margin-top: 25vh;
    }

</style>